<template>
    <div>
        <img :src="props.modelValue" alt="" />
        <input type="file" :accept="accept" @change="handleChange" />
    </div>
</template>
<script setup lang="ts">
import { uploadFile } from '@/api/upload.js'
const props = defineProps({
    modelValue: { type: String, default: '' },
    accept: { type: String, default: 'image/*' },
})
const emits = defineEmits(['update:modelValue '])
// const model = defineModel({default: null})
const handleChange = (event: Event) => {
    const file = (event.target as HTMLInputElement).files?.[0]
    console.log('file', file)
    if (!file) return
    if (file.size > 20 * 1024 * 1024) {
        postBigFile(file)
    } else {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
            console.log(reader.result)
            const formData = new FormData()
            formData.append('file', file)
            formData.append('file2', reader.result as string)
            console.log({ formData })
            uploadFile(formData).then((res) => {
                console.log('upload file', res)
            })
        }
    }
}
const postBigFile = (file: File) => {
    console.log(file);

}
</script>
<style lang="scss" scoped>
.upload {
}
</style>
